<template>
      <div id="yl">
            <div class="info">
                  <div class="title">盈利模式</div>
                  <div class="sub">多渠道收入,高佣金分润,让合作伙伴收入更多更持久</div>
            </div>
            <div class="content">
                  <div class="item" v-for="(item, index) in list" :key="index" @mouseover="onOver(index)" @mouseleave="onOut">
                        <img :src="item.icon" alt="">
                        <div class="txt animated" >
                              <div class="stitle">
                                    {{ item.name }}
                              </div>
                              <div class="infos "  v-if="show == index">
                                    {{ item.info }}
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
import { log } from 'util'
      export default {
            data() {
                  return {
                        show: "null",
                        list: [
                              {
                                    icon: require("../../assets/img/s1.png"),
                                    name: "平台搭建",
                                    info: "商户通过合作伙伴开通支付,使用盈友的基础支付功能,具体价格根据市场而定,所有开户收益归合作伙伴所有.盈友拥有完善的培训体系和城市运营团队,会协助合作伙伴拓展市场"
                              },
                              {
                                    icon: require("../../assets/img/s2.png"),
                                    name: "机具盈利",
                                    info: "上市公司顶级移动三通道多种机型,盈友独家合作,给到作伙伴最低成本价格,售后完善,质量保证,以及各种低成本物料支持,合作伙伴能够给商户提供物料与硬件的销售"
                              },
                              {
                                    icon: require("../../assets/img/s3.png"),
                                    name: "佣金分润",
                                    info: "这个分润是长期收益,而且不需要运营成本的,只要您邀请入驻的商户使用盈友产品完成支付,您就可以长期获得分润,如需微信与支付宝最新费率优惠政策,请拨打合作热线"
                              },
                              {
                                    icon: require("../../assets/img/s4.png"),
                                    name: "营销板块",
                                    info: "盈友拥有强大的营销系统,除了基础的支付功能,还有营销模块,行业方案,所有权限开通费用归合作伙伴所有,我们会提供完善的培训体系,指导合作伙伴使用与熟悉这些功能,支持合作伙伴市场推广"
                              },
                        ]
                  }
            },
            methods: {
                  onOver( index ) {
                              this.show = index
                              // console.log(this.show);
                              
                  },
                  onOut() {
                        this.show = "null"
                  }
            },
      }
</script>

<style lang="scss" scoped>
#yl {
      width: 1920px;
      height: 724px;
      background: url("../../assets/img/dbgbig.png") 0 0 no-repeat;
      background-size: 100% 100%;
      margin: 80px auto 0 auto;
      .info {
            width: 100%;
            padding-top: 30px;
            text-align: center;
            color: #fff;
            .title {
                  font-size: 30px;
            }
            .sub {
                  font-size: 18px;
            }
      }
      .content {
            width: 1440px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            .item {
                  width: 515px;
                  border-radius: 20px;
                  overflow: hidden;
                  cursor: pointer;
                  margin: 30px 0;
                  position: relative;
                  left: 0;
                  top: 0;
                  img {
                        display: block;
                  }
                  .txt {
                        width: 100%;
                        padding: 0 20px;
                        color: #000;
                        font-size: 24px;
                        text-align: center;
                        transition: all 0.5s linear;
                        background-color: #fff;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        .stitle {
                              height: 58px;
                              line-height: 58px;
                        }
                        .infos {
                              font-size: 20px;
                              line-height: 30px;
                              height: 142px;
                        }
                  }
            }
      }
}
</style>